<template>
	<view class="login-bg"></view>
	<view class="userInfo">
		<image class="userPic" :src="appletsLogin.state.headimgurl" mode="aspectFit"></image>
		<view class="userName">{{ appletsLogin.state.nickname }}</view>
		<button type="default" @click="appletsLogin.toLoginByWx()">
			<image class="wxLogo" src="../../static/icon/wxLogo.png" mode="aspectFill"></image>
			微信登录
		</button>
		<button type="primary" @click="appletsLogin.logoutByWx()">退出登录</button>
	</view>
</template>

<script lang="ts" setup>
import appletsLogin from '../../appletsStore/index';
</script>

<style lang="scss" scoped>
.login-bg {
	height: 100vh;
	width: 100vw;
	background-color: #f2f2f2;
	background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
	background-size: cover;
	box-sizing: border-box;
	position: fixed;
	z-index: -1;
}
.userInfo {
	padding-top: 30%;
}

.userInfo .userPic {
	display: block;
	margin: 0 auto;
	border-radius: 50%;
	width: 300upx;
	height: 300upx;
}
.wxLogo {
	width: 2rem;
	height: 2rem;
	vertical-align: middle;
}
.userName {
	margin-top: 2rem;
	margin-bottom: 2rem;
	line-height: 2rem;
	text-align: center;
	color: lightskyblue;
	font-size: 2rem;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
}
button {
	margin-bottom: 2rem;
}
</style>
